<!--
 * @Project:
 * @Remark:
 * @Author: shaoyuan
 * @Date: 2023-04-19 14:08:43
 * @LastEditors: shaoyuan
 * @LastEditTime: 2023-04-19 23:01:44
 * @FilePath: \logicflow-vue3-ts-vite\src\components\brevityElement\pattern.vue
-->
<template>
  <div class="logicflow-pattern" id="logicflowPattern" ref="logicflowPattern">
    <div class="pattern-selection" @mousedown="openSelection" />
    <div>选区</div>
    <div class="pattern-start" @mousedown="addStartNode" />
    <div>开始</div>
    <div class="pattern-user" @mousedown="addUserTask"></div>
    <div>用户任务</div>
    <div class="pattern-user" @mousedown="addServiceTask"></div>
    <div>系统任务</div>
    <div class="pattern-condition" @mousedown="addGateWay"></div>
    <div>条件判断</div>
    <div class="pattern-end" @mousedown="addEndNode"></div>
    <div>结束</div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref, defineProps } from 'vue'
import type LogicFlow from '@logicflow/core'

type IProps = {
  lf: LogicFlow
}

const props = defineProps<IProps>()

function addStartNode() {
  props.lf.dnd.startDrag({
    type: 'bpmn:startEvent',
    text: '开始'
  })
}
function addUserTask() {
  props.lf.dnd.startDrag({
    type: 'bpmn:userTask'
  })
}
function addServiceTask() {
  props.lf.dnd.startDrag({
    type: 'bpmn:serviceTask'
  })
}
function addGateWay() {
  props.lf.dnd.startDrag({
    type: 'bpmn:exclusiveGateway'
  })
}
function addEndNode() {
  props.lf.dnd.startDrag({
    type: 'bpmn:endEvent',
    text: '结束'
  })
}
function openSelection() {
  props.lf.updateEditConfig({
    stopMoveGraph: true
  })
}
props.lf &&
  props.lf.on('selection:selected', () => {
    props.lf.updateEditConfig({
      stopMoveGraph: false
    })
  })
</script>
<style scoped>
.logicflow-pattern {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 60px;
  display: flex;
  flex-direction: column;
  z-index: 111;
  align-items: center;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  padding: 10px 0;
  font-size: 12px;
  color: #676768;
  user-select: none;
}
.pattern-selection {
  width: 36px;
  height: 36px;
  background: url()
    center center no-repeat;
  cursor: pointer;
  opacity: 0.99;
}
.pattern-start {
  width: 36px;
  height: 36px;
  background: url()
    center center no-repeat;
  cursor: grab;
  opacity: 0.99;
}
.pattern-end {
  width: 36px;
  height: 36px;
  background: url()
    center center no-repeat;
  cursor: grab;
  opacity: 0.99;
}
.pattern-user {
  width: 36px;
  height: 36px;
  background: url()
    center center no-repeat;
  cursor: grab;
  opacity: 0.99;
}
.pattern-condition {
  width: 36px;
  height: 36px;
  background: url()
    center center no-repeat;
  cursor: grab;
  opacity: 0.99;
}
</style>
